<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
    <title>会议翻译</title>
    <link rel="stylesheet" href="../css/mui.min.css">
    <script src="../js/mui.min.js"></script>
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../css/app.css" />
    <script src="../js/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="../npl/css/vant.mini.css" />
    <link rel="stylesheet" href="../css/voice.css">
    <script src="../js/vue.js"></script>
    <script src="../js/vconsole.min.js"></script>
    <script src="../js/flexible.js"></script>
    <script src="../js/clipboard.js"></script>
    <script src="../npl/js/vant.mini.js"></script>
    <script src="../js/sm3.js"></script>
    <script src="../js/sm2.js"></script>
    <script src="./text.js" type="text/javascript"></script>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }

    #app {
        background-color: #fff;
    }

    .box {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .form-box {
        display: flex;
        padding: 10px .2rem 8px;
    }

    .van-cell--required::before {
        left: .26rem;
    }

    .form-box .van-cell {
        border-radius: 7px;
        align-items: center;
        padding: 0 .4rem;

    }

    .van-cell {
        font-weight: 500;
        font-size: 15px !important;

    }

    .form-box .van-cell.van-field--min-height {
        /* padding: 10px 10px 0; */
    }

    .van-cell__value,
    .van-field__body {
        width: 100%;
        height: 100%;
    }

    .form-box .van-field--disabled {

        color: #646566;
    }

    .form-box input[type=text] {
        border: none;
        margin-bottom: 0;
        padding: 0;
    }

    .van-nav-bar {
        /* background: none !important;; */
    }

    .wrapper {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .van-field__control:disabled {
        width: 100%;
        height: 100%;
        -webkit-text-fill-color: #323233;
        color: #323233;
    }

    .text_b {
        display: flex;
        height: 1rem;
        width: 100%;
        background-color: #fff;
        padding: 0 20px;
        align-items: center;
        justify-content: space-between;
    }

    .text_b_imgbox {
        /* width: ; */
        display: flex;
    }

    .text_b_imgbox p {
        width: .8rem;
        height: .8rem;
    }

    .text_b_imgbox p:nth-child(1) {
        margin-right: 15px;
    }

    .text_b_imgbox p img {
        width: 100%;
        height: 100%;
    }

    .van-button--primary {
        height: .7rem !important;
        background-color: #62cccc !important;
        border: none !important;
    }

    .ldBtn {
        display: flex;
        justify-content: right;
        padding: 0 20px 10px;
    }

    .popTitle {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 1rem;
        padding: .6rem 0 0;
        color: #000;
        font-size: 19px;
        margin-bottom: .7rem;
        font-weight: bold;

    }

    .vanPop {
        padding: 0 10px 10px
    }

    .van-radio__icon--checked .van-icon {
        background-color: #fff !important;
        border-color: #fff !important;
        color: #19a97b;
    }

    .van-cell--clickable:active {
        background-color: #fff !important;
    }

    .van-icon-success:before {
        background-color: #fff !important;
        border-color: #fff !important;
    }

    .van-radio__icon .van-icon {
        border: none !important;
    }

    .van-nav-bar .van-icon {
        color: #000;
        font-size: 12px;
    }

    .jiantou {
        font-size: 25px;
    }

    .box_from {
        flex: 1;
        background-color: #F3F6FF;
        display: flex;
        flex-direction: column;
    }

    .btn_l_img {
        margin: 0 .2rem;
        width: 0.96rem;
        height: 0.56rem;
    }

    .btn_l_img img {
        width: 100%;
        height: 100%;
    }

    .title_headers {
        height: 1.5rem;
        display: flex;
        flex-direction: column;
        padding-left: .6rem;
    }

    .title_headers_p1 {
        font-weight: bold;
        font-size: 18px;
        margin: .35rem 0 .2rem;
        color: #000;
    }

    .musicPlay {
        display: flex;
        width: 100%;
        /* height: 70px; */
    }

    .playControl {
        display: flex;
        align-items: center;
        user-select: none;
        width: 100%;
        /* margin-top: 12px; */
        justify-content: space-between;
        /* padding-top: 5px; */
        padding-left: 5px;
        /* width: 320px;
            height: 40px; */
    }

    .audioVolSpan {
        margin-right: 10px;
        margin-left: 32%;
    }

    .audioSpan,
    .audioVolSpan {
        color: #333;
        font-size: 24px;
        /* margin-right: 30px; */
        cursor: pointer;
    }

    .audioControl {
        background: none !important;
        ;
    }
</style>
</head>

<body>
    <div class="box" id="app">
        <div class="header_tit">
            <van-nav-bar left-arrow>
                <template #left>
                    <div class="back_l" @click="home"><img src="../image/left.png" alt=""></div>
                </template>
                <template #title>
                    <!-- @click="popShow=true" -->
                    <div style="display:inline;" v-html="langAct">
                    </div>
                    <!-- <div style="display:inline;">
                        <van-icon name="arrow-down" />
                    </div> -->
                </template>
                <template #right>
                    <div class="btn_l_img" @click="sendEmail"><img src="../image/lu_youx.png" alt=""></div>
                </template>
            </van-nav-bar>
        </div>
        <!-- 后续改成'54%' -->
        <van-popup :close-on-click-overlay="false" class="vanPop" v-model="popShow" closeable position="bottom"
            :style="{height: '29%',borderRadius:'5% 5% 0 0',left:0,bottom:0}">
            <div class="popTitle">
                切换语言
            </div>
        </van-popup>
        <div class="title_headers">
            <p class="title_headers_p1" v-text="messageTitle"></p>
            <p class="title_headers_p2" v-text="messageTime"></p>
        </div>
        <div class="wrapper">
            <div class="form-box">
                <van-field  readonly  @touchstart.prevent v-model="content" type="textarea" rows="9" ref="field1" @click="demo1" disabled
                    show-word-limit id='output_box' />
            </div>
            <div class="box_from">
                <div class="form-box" style="flex:1">
                    <van-field  readonly  @touchstart.prevent ref="field1" id='output_box_web' style="background:none;" v-model="content1"
                        type="textarea" style="width:100%;height:100%" disabled show-word-limit />
                </div>
                <div class="ldBtn">
                    <div class="musicPlay">
                        <audio ref="audio" id="course-aud" @play="playFunc" @pause="pauseFunc" preload="auto"
                        @timeupdate="timeupdateFunc" @canplay="canplayFunc" :src="audioSrc">
                        </audio>
                        <div class="audioControl">
                            <div class="playControl">
                                <!-- <van-dropdown-menu active-color="#1989fa" direction="up">
                              <van-dropdown-item  />
                            </van-dropdown-menu> -->
                                <!--             
                            <div class="audioSpan" @click="skipTime(-5)" style="width: 0.5rem;height: 0.54rem;">
                              <img style="width: 100%; height: 100%;" src="../image/speed2.png" alt="">
                            </div> -->
                                <div style="width: 2rem;height: 0.54rem;"></div>
                                <span class="audioSpan" @click="clickFunc('play')" v-show="!isPlaying"
                                    style="margin: 0 .3rem;width: 1rem;height: 1rem;">
                                    <img style="width: 100%; height: 100%; " src="../image/luyin_bf.png" alt="">
                                </span>
                                <span class="audioSpan" @click="clickFunc('pause')" v-show="isPlaying" style="
                                    margin: 0 .3rem;width: 1rem;height: 1rem;">
                                    <img style="width: 100%; height: 100%;" src="../image/luyilu_STOP.png" alt="">
                                </span>
                                <span style="margin-right: .3rem;width: 0.5rem;height: 0.54rem;"></span>
                                <span style="margin-right: .3rem;width: 0.5rem;height: 0.54rem;"></span>
                                <!-- <span class="audioSpan" @click="skipTime(5)" style="margin-right: .3rem;width: 0.5rem;height: 0.54rem;">
                              <img style="width: 100%; height: 100%;" src="../image/speed1.png" alt="">
                            </span> -->

                                <div style="display: flex; align-items: center;height: 60px;width: 60px;">
                                    <div style="color: #333; text-align: center;font-size: 12px;">
                                        {{ formatCurrentTime }}
                                        <div
                                            style="height: 1px;width:35px;background: rgba(255,255,255,1);border: none;border-top: 1px solid #555555;">
                                        </div>
                                        {{ formatDuration }}
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
        function toStringFunc(param) {
      if (param > 9) {
        return param + ''
      } else {
        return '0' + param
      }
    }
    new Vue({
        el: '#app',
        data() {
            let voicelist = [];
            return {
                content: '',
                content1: "",
                messageTitle: '',
                messageTime: '',
                inputDom: null,
                inputDomweb: null,
                isPlaying: false,
                count: 0,
                popShow: false,
                totalTimes: '00:00',
                currentTime: '00:00',
                transId:'',
                audioSrc:"",
                // audioSrc:'https://baikevideo.cdn.bcebos.com/media/mda-O9xINmeZEwxyMv5u/c869e54cdfc5dd6663a0f52f16999531.mp4',
                radio: "2",
                langAct: '英 <span class="jiantou">→</span> 中',
            }
        },
        computed: {
            formatDuration() {
                if (typeof this.totalTimes === 'number') {
                    const fTotal = Math.floor(this.totalTimes)
                    const tempMin = Math.floor(fTotal / 60)
                    const tempSec = fTotal % 60
                    return `${toStringFunc(tempMin)} : ${toStringFunc(tempSec)}`
                }
                return '00 : 00'
            },
            formatCurrentTime() {
                if (typeof this.currentTime === 'number') {
                    const fTotal = Math.floor(this.currentTime)
                    const tempMin = Math.floor(fTotal / 60)
                    const tempSec = fTotal % 60
                    return `${toStringFunc(tempMin)} : ${toStringFunc(tempSec)}`
                }
                return '00 : 00'
            }
        },
        created() {
            $.getScript("../js/jweixin-sgccigw-1.0.0.js" /*"js/jweixin-1.0.0.js"*/ , () => {
                let jsApiList = [];
                let _this = this
                wx.ready(() => {
                    var str = JSON.parse(window.sessionStorage.getItem("translateItem"))
                    _this.viewDetails(str.id)
                    _this.transId = str.id
                    wx.onHistoryBack(() => {
                        _this.home()
                        return false
                    })
                });
                jsApiList = [
                    'startRecord',
                    'stopRecord',
                    'onVoiceRecordEnd',
                    'translateVoice',
                    'onHistoryBack',
                    "onHistoryBack"
                ];
                wx.config({
                    beta: true,
                    debug: false,
                    appId: "ww4d11a39991ebffdc",
                    timestamp: '1639582452',
                    nonceStr: "AMQGnmTMzhJetshY",
                    signature: 'fb9f560a9b4824f7db3525926994010de74ea055',
                    jsApiList: jsApiList
                });
            });
        },
        mounted() {
            this.$nextTick(() => {
                this.inputDom = document.getElementById("output_box")
                this.inputDomweb = document.getElementById("output_box_web")
            })
        },
        methods: {
            timeupdateFunc(e) {
                        this.playProcess = (e.target.currentTime / this.totalTimes) * 100
                        this.currentTime = e.target.currentTime
                    
                    this.$emit('timeupdate', this.currentTime, this.playProcess)
                },
            clickFunc(val) {
          if (val == 'play') {
            this.isPlaying = !this.isPlaying
            this.$refs.audio.play()
          } else if (val == 'pause') {
            this.isPlaying = !this.isPlaying
            this.$refs.audio.pause()
          }
        },
                 // 暂时
        pauseFunc(e) {
          // console.log('music is paused')
          this.isPlaying = false
          this.$emit('pause', this.isPlaying)
        },
        playPause() {
          if (!this.isPlaying) {
            this.$refs.audio.pause();
          } else {
            this.$refs.audio.play();
          }
        },
  // 开始
  playFunc() {
          this.playPause();
          this.isPlaying = true
          this.$emit('play', this.isPlaying)
          },
            async canplayFunc(e) {
                const firsthandAudio = e.target;
                console.log(firsthandAudio.duration,"888")
                while (firsthandAudio.duration === Infinity) {
                    await new Promise(r => setTimeout(r, 200));
                    firsthandAudio.currentTime = 10000000 * Math.random();
                }
                this.totalTimes = firsthandAudio.duration;
                this.isError = false
                this.$refs.audio.volume = 0.5
            },
            home() {
                $(location).attr("href", "translationPage.html");
            },
            starPlay() {
                this.ldBtn = !this.ldBtn
            },
            stopPlay() {
                this.ldBtn = !this.ldBtn
            },

            viewDetails(id) {
                userId = sessionStorage.getItem("userId");
                if (sessionStorage.getItem("iscp_port")) {
                    iscp_port = sessionStorage.getItem("iscp_port");
                } else {
                    iscp_port = ""
                }
                const timestamp = new Date().getTime() + ""
                let data = {
                    "id": id,
                    "userId": userId,
                    "timestamp": timestamp,
                };
                let AuthenticationSession = sessionStorage.getItem("Authentication");
                data = JSON.stringify(data)
                let sign = sm3(data);
                $.ajax({
                    url: localUrlLink + iscp_port +
                        "/tjAiAssistant/translation/queryTranslationInfoById",
                    type: "post",
                    async: false, //是否同步，false表示同步请求
                    dataType: "json",
                    data: data, 
                    headers: {
                        "Content-Type": "application/json;charset=UTF-8",
                        Authentication: AuthenticationSession,
                        sign: sign
                    },
                    success: (res, txt, xhr) => {
                        if (sm3(res.resultValueStr) == xhr.getResponseHeader("sign")) {
                            let Authentication = xhr.getResponseHeader("Authentication")
                            if (res.code == 200) {
                                if (Authentication) {
                                    sessionStorage.setItem("Authentication", Authentication);
                                    this.content = res.resultValue.dataText
                                    this.content1 = res.resultValue.resultText
                                    this.messageTitle = res.resultValue.messageTitle
                                    this.messageTime = this.dateTimeText(res.resultValue.createTime)
                                    let voiceSign = sm3(timestamp + "&" + res.resultValue.id);
                                    if (res.resultValue.attachmentId) {
                                        let voiceSign = sm3(timestamp + "&" + res.resultValue.attachmentId);
                                        this.audioSrc = localUrlLink + iscp_port + `/tjAiAssistant/voice/getAudioByAttachmentId?Authentication=${Authentication}&id=${res.resultValue.attachmentId}&sign=${voiceSign}&timestamp=${timestamp}`
                                    } else {
                                        setTimeout(() => {
                                            this.viewDetails(id)
                                        }, 5000)
                                    }
                                }
                            } else {
                                mui.toast(res.resultValue, {
                                    duration: 'long',
                                    type: 'div'
                                })
                            }
                        } else {
                            mui.toast('完整性校验失败', {
                                duration: 'long',
                                type: 'div'
                            })
                        }
                    },
                    error: (e) => {
                        mui.toast('请稍后再试', {
                            duration: 1000,
                            type: 'div'
                        })
                    },
                });
            },
            sendEmail() {
                const userId = sessionStorage.getItem("userId");
                const orgId = sessionStorage.getItem("unitId")
                if (sessionStorage.getItem("iscp_port")) {
                    iscp_port = sessionStorage.getItem("iscp_port");
                } else {
                    iscp_port = ""
                }
                const timestamp = new Date().getTime() + ""
                let data = {
                    "message": this.transId,
                    "userId": userId,
                    "orgId":orgId,
                    "messageTitle": "AI助手-会议翻译",
                    "sceneNo":"45",
                    "timestamp": timestamp,
                };
                let AuthenticationSession = sessionStorage.getItem("Authentication");
                data = JSON.stringify(data)
                let sign = sm3(data);
                $.ajax({
                    url: localUrlLink + iscp_port +
                        "/tjAiAssistant/translation/translationInfoSendMail",
                    type: "post",
                    async: false, //是否同步，false表示同步请求
                    dataType: "json",
                    data: data,
                    headers: {
                        "Content-Type": "application/json;charset=UTF-8",
                        Authentication: AuthenticationSession,
                        sign: sign
                    },
                    success: (res, txt, xhr) => {
                        if (sm3(res.resultValueStr) == xhr.getResponseHeader("sign")) {
                            let Authentication = xhr.getResponseHeader("Authentication")
                            if (res.code == 200) {
                                if (Authentication) {
                                    sessionStorage.setItem("Authentication", Authentication);
                                    mui.toast("发送成功", {
                                    duration: 'long',
                                    type: 'div'
                                })
                                }
                            } else {
                                mui.toast(res.resultValue, {
                                    duration: 'long',
                                    type: 'div'
                                })
                            }
                        } else {
                            mui.toast('完整性校验失败', {
                                duration: 'long',
                                type: 'div'
                            })
                        }
                    },
                    error: (e) => {
                        mui.toast('请稍后再试', {
                            duration: 1000,
                            type: 'div'
                        })
                    },
                });
            },
            dateTimeText(value) {
                if (!value || new Date(value) == 'Invalid Date') return "";
                const date = new Date(value)
                const currentY = new Date().getFullYear()
                const Y = date.getFullYear()
                const M = date.getMonth() + 1
                const D = date.getDate()
                const h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
                const m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
                if (currentY === Y) {
                    return `${M}月${D}日 ${h}:${m}`
                } else {
                    return `${Y}年${M}月${D}日 ${h}:${m}`
                }
            },
            demo1() {
                console.log(999)
                // 判断光标是点击的0位还是默认直接说话
                // this.$refs.field1.focus();
                // var $input1 = document.getElementById("clipboardContent");
                // if ($input1.selectionStart == 0) {
                //     this.isFlagStartTrue = true
                // }
            },
        }
    })
</script>

</html>